<template>
  <bs-dialog :title="editorForm.id? $t('编辑屏幕'):$t('添加屏幕')" :visible.sync="editor" size="mini" @closed="doCloseEdit" class="deviceDialog">
    <template slot="main">
      <el-form :model="editorForm" :rules="editorFormRules" ref="editorFormRef" label-width="110px" size="small" :show-message="false" :hide-required-asterisk="true" :status-icon="false">
        <input v-model="editorForm.id" type="hidden" />
        <el-form-item :label="$t('屏幕名称')" prop="name">
          <!-- <el-select v-model="editorForm.name" :placeholder="$t('请选择屏幕名称')" :disabled="editorForm.hasUsed" clearable style="width: 100%;">
            <el-option v-for="(item, index) in nameData" :key="index" :label="$t(item.name)" :value="item.value"></el-option>
          </el-select> -->
          <el-input v-model="editorForm.name" maxlength="20" :placeholder="$t('请输入屏幕名称')" :show-word-limit="false" :disabled="editorForm.hasUsed" clearable></el-input>
        </el-form-item>
        <el-form-item :label="$t('宽')" prop="width">
          <el-input v-model="editorForm.width" maxlength="5" :placeholder="$t('请输入屏幕宽')" :show-word-limit="false" :disabled="editorForm.hasUsed" clearable></el-input>
        </el-form-item>
        <el-form-item :label="$t('高')" prop="height">
          <el-input v-model="editorForm.height" maxlength="5" :placeholder="$t('请输入屏幕高')" :show-word-limit="false" :disabled="editorForm.hasUsed" clearable></el-input>
        </el-form-item>
        <el-form-item :label="$t('厂家信息')" prop="manufactor">
          <el-input v-model="editorForm.manufactor" maxlength="20" :placeholder="$t('请输入厂家信息')" :show-word-limit="false" :disabled="editorForm.hasUsed" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item :label="$t('屏幕旋转方向')" prop="rotate">
          <el-select v-model="editorForm.rotate" :placeholder="$t('0度')" :disabled="editorForm.hasUsed" clearable style="width: 100%;">
            <el-option v-for="(item, index) in rotateData" :key="index" :label="$t(item.name)" :value="item.value"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item :label="$t('屏幕类型')" prop="type">
          <el-select v-model="editorForm.type" :placeholder="$t('请选择屏幕类型')" :disabled="editorForm.id ? true : false" clearable style="width: 100%;">
            <el-option v-for="(item, index) in typeData" :key="index" :label="$t(item.name)" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('是否是默认屏')" prop="useDefault">
          <el-checkbox v-model="editorForm.useDefault" :true-label="1" :false-label="0"></el-checkbox>
        </el-form-item>
      </el-form>
    </template>

    <template slot="footer">
      <bs-confirm-button-icon @click.native="doSave"></bs-confirm-button-icon>
      <bs-cancel-button-icon @click.native="doCloseEdit"></bs-cancel-button-icon>
    </template>
  </bs-dialog>
</template>

<script>
import ScreenApi from '@/api/screen'
export default {
  name: 'SetScreenDialog',
  data() {
    return {
      editor: false,
      editorForm: {
        useDefault: 0
      },
      editorFormRules: {
        name: [
          { required: true, message: '请输入屏幕名称', trigger: 'blur' },
          { pattern: /^[[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '屏幕名称输入不合法'}
        ],
        width: [
          { required: true, message: '请输入屏幕宽度', trigger: 'blur' },
          { pattern: /^[0-9]+$/, message: '只能输入数字' }
        ],
        height: [
          { required: true, message: '请输入屏幕高度', trigger: 'blur' },
          { pattern: /^[0-9]+$/, message: '只能输入数字' }
        ],
        manufactor: [
          { required: true, message: '请输入厂家信息', trigger: 'blur' },
          { pattern: /^[[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '厂家信息输入不合法'}
        ]
      },
      // rotateData: [
      //   { name: '0度', value: 0 },
      //   { name: '90度', value: 1 },
      //   { name: '180度', value: 3 },
      //   { name: '270度', value: 2 }
      // ],
      typeData:[
        { name: '新闻屏', value: 1 },
        { name: '广告屏', value: 2 },
      ],
      // nameData:[
      //   { name: '新闻屏1', value: 1 },
      //   { name: '新闻屏2', value: 2 },
      //   { name: '广告屏', value: 3 },
      // ]

    }
  },
  created() {
    this.$eventBus.$on('addScreenDialogShow', this.show);
  },
  beforeDestroy() {
    this.$eventBus.$off('addScreenDialogShow');
  },
  methods: {
    resetForm() {
      this.editorForm = {
        rotate: 0,
        useDefault: 0
      }
    },
    // 显示
    show(form) {
      this.editorForm = {
        ...form
      }
      this.editor = true
    },
    // 关闭
    doCloseEdit: function () {
      this.resetForm()
      this.$refs.editorFormRef.clearValidate()
      this.editor = false
    },
    // 保存表单
    async doSave() {
      this.$refs.editorFormRef.clearValidate()
      this.$refs.editorFormRef.validate(async valid => {
        if (valid) {
          if(this.editorForm.id){
            const res = await ScreenApi.editScreen(this.editorForm)
            if(res) {
              this.doCloseEdit()
              this.$eventBus.$emit('doList', { current: 1 })
              this.$success('upd')
            }
          }else{
           const res = await ScreenApi.addScreen(this.editorForm)
            if(res) {
              this.doCloseEdit()
              this.$eventBus.$emit('doList', { current: 1 })
              this.$success('add')
            }
          }
        } else {
          let index = 0
          this.$refs.editorFormRef.fields.forEach(field => {
            if(field.validateMessage) {
              if(index === 0) {
                console.log(field.validateMessage)
                this.$message.error(field.validateMessage)
                this.validateMsg=[]
              }
              index ++
            }
          })
          return
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form {
  padding: 15px 10px 0 15px;
}
::v-deep .el-dialog {
  height: 380px;
}
</style>
